<template>
  <div class="okOrders">
    <van-nav-bar title="确认订单" left-arrow @click-left="$router.back()" />
    <van-cell
      @click="$router.push('/address')"
      icon="location-o"
      title="请选择地址"
      is-link
    />
    <div class="shop">
      <div class="l">
        <img :src="info.image" alt="" />
      </div>
      <div class="r">
        <p class="title">{{ info.title }}</p>
        <p class="red">￥{{ info.price / 100 + '0' }}</p>
      </div>
    </div>
    <van-cell title="类型" value="课程" />
    <van-cell title="数量" :value="'x' + info.send_count" />
    <van-cell title="商品价格" :value="'￥' + info.price / 100 + '0'" />
    <van-cell title="优惠券" value="暂无优惠" />
    <van-submit-bar
      :price="info.price"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { okOrdersApi } from '@/http/api'
export default {
  setup(props) {
    const route = useRoute()
    const data = reactive({
      info: {},
      id: route.query.id
    })
    onMounted(() => {
      getOkOrders()
    })
    console.log('id', route.query.id)
    const getOkOrders = async () => {
      const res = await okOrdersApi({ shop_id: data.id, type: 1 })
      data.info = res.info
      console.log('info', res)
    }

    const onSubmit = () => {
      console.log(1)
    }
    return {
      ...toRefs(data),
      getOkOrders,
      onSubmit
    }
  }
}
</script>
<style lang="scss" scoped>
.shop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  .l {
    width: 280px;
    img {
      width: 100%;
    }
  }
  .r {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 420px;
    .title {
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .red {
      font-size: 16px;
      color: red;
    }
  }
}
</style>
